<template>
	<view class="cart-page">
		<delVue :Visible="isdel" @isModal="gomodal" @goStay="gostay" :oneText="one" :twoText="two"
			:threeText="threeText" :fourText="four" />

		<view class="title">
			<alltitleVue :title="title" :url="url" />
			<view class="top" v-for="(item, index) in list" v-if="statusValue == item.status">
				<view class="top-box">
					<image :src="item.url" mode=""></image>
					<view class="">
						<view class="" :class="{ 'successful': status == 200 }">
							{{ item.name }}
						</view>
						<view class="text-co">
							{{ item.text == "" ? countdown : item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="24" height="600rpx">
			<view class="pop-tit pop-bor">
				选择退款原因
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true">
				<view class="refundBox" v-for="(item, index) in refundData" :key="item.id">
					<view>{{ item.title }}</view>
					<view :class="['checkbox', { selected: index == isRefund }]" class="checkbox"
						@click="toggleItemSelection(item, index)">
						<image v-if="index == isRefund" :src="togglebg" mode=""></image>
						<!-- <u-icon v-if="index==isRefund" color="#fff" size="32" name="checkmark"></u-icon> -->
					</view>
					<!-- 展示退款原因名称 -->
				</view>
			</scroll-view>
			<view class="refund-btn">
				<view class="butt butts" @click="confirmRefund">
					确定退款
				</view>
				<view class="butt " @click="thinkAgain">
					我再想想
				</view>

			</view>
		</u-popup>

		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="" v-if="statusValue != 103 && statusValue != 104">


				<view class="container-box" v-if="caseList.seleAddress == '请先选择地址和配送方式，再确认订单信息'">

					<view class="addressno" @click="goAdd">
						<view class="" style="display: flex; align-items: center;">
							<image src="../../static/home/one.png" mode=""></image>
							<text>请先选择地址和配送方式，再确认订单信息</text>
						</view>
						<image class="right-img" :src="right" mode=""></image>

					</view>

				</view>
				<view class="container-box" v-else>
					<view class="deliver" @click="deliver" v-if="statusValue == 107">
						
							<image :src="carImg" mode=""></image>
							<view class="deliver-tit" >
								{{companyName || ''}}
							</view>
							<view class="deliver-tit">
								单号:
							</view>
						
						<view class="deliver-text">
							{{ orderDetails.logisticsNo || 0 }}
						</view>
						<image class="right-img" :src="right" mode=""></image>

					</view>
					<view class="info-card" v-if="caseList" @click="cardClick">
						<view class="">
							<view class="">
								{{ caseList.seleAddress || "" }}
							</view>
							<view class="info">
								<text>{{ caseList.name || '' }}</text>
								<text>{{ caseList.mobile || "" }}</text>
							</view>
						</view>
						<!-- <image class="right-img" :src="right" mode=""></image> -->
					</view>
				</view>
			</view>





			<view class="cart-box" v-for="item in cartData" :key="item.id">
				<view class="cart-tit" v-if="statusValue == 103 || statusValue == 104">
					退款信息
				</view>
				<view class="cart-item">
					<image :src="item.goods.photoUrl.split(',')[0]" class="item-image" />
					<view class="actions-main">
						<view class="item-details">
							<text>{{ item.goods.title }}</text>

						</view>
						<view class="main-item">
							<view class="box-text">
								￥
								<text>{{ item.goods.price || 0 }}</text>
							</view>

							<view class="box-text all-text">
								x
								<text class="all-text">{{ item.count }}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="refund-box" v-if="statusValue == 105">
					<view class="refund" @click="evaluate(item)">
						评价
					</view>
				</view>

				<!-- <view class="refund-box" v-if="statusValue!=103 && statusValue!=104 && statusValue!=100">
					<view class="refund" @click="refund(item)">
						申请退款
					</view>
				</view> -->

			</view>
			<!-- 退款信息 -->
			<view class="box" v-if="statusValue == 103 || statusValue == 104">
				<view class="box-one">
					<text>退款金额：</text>
					<view class="">
						<view class="" v-if="orderDetails.zt == 1">
							<text
								class="one-color">￥{{ orderDetails.totalPrice || 0 }}</text>(不包含运费￥{{ freight[1].dictValue }})
						</view>
						<view class="" v-else>
							<text class="one-color">到院领取</text>
						</view>
					</view>
				</view>
				<view class="box-one">
					<text>售后方式：</text>
					<view class="">
						商家退款用户退货
					</view>
				</view>
				<view class="box-one box-border">
					<text>退款原因：</text>
					<view class="">
						{{ orderDetails.refundCause || '无' }}
					</view>
				</view>
				<view class="box-one">
					<text>售后编号：</text>
					<view class="">
						{{ orderDetails.memberId || '无' }}
					</view>
				</view>
				<view class="box-one">
					<text>申请时间：</text>
					<view class="">
						{{ orderDetails.createTime || '无' }}
					</view>
				</view>
				<view class="box-one">
					<text>数量：</text>
					<view class="">
						{{ orderDetails && orderDetails.goodsOrderDetails && orderDetails.goodsOrderDetails.length > 0 ? orderDetails.goodsOrderDetails.length : 0 }}
					</view>
				</view>
			</view>

			<view class="box" v-if="statusValue != 103 && statusValue != 104">
				<view class="box-one">
					<text v-if="orderDetails.totalPrice < 1000 && orderDetails.zt != 1">配送方式</text>
					<view class="" v-if="orderDetails.totalPrice < 1000 && orderDetails.zt != 1">
						快递<text>￥{{ freight[1].dictValue }}</text>
					</view>
					<view v-if="orderDetails.totalPrice > 1000 && orderDetails.zt != 1">
						免运费
					</view>
					<view class="" v-if="orderDetails.zt == 1">
						到院领取
					</view>
				</view>
				<!-- <view class="box-one">
					<text>订单备注</text>
					<view class="">
						无
					</view>
				</view> -->
				<!-- <view class="box-one">
					<text>发票</text>
					<view class="">
						请填写开票信息
					</view>
				</view> -->
			</view>
			<view class="box" v-if="statusValue != 104 && statusValue != 103">
				<view class="box-one ">

					<view class="one-colors">
						商品数量
						<text style="margin-left: 10rpx;">共{{ orderDetails.goodsOrderDetails && orderDetails.goodsOrderDetails.length || 0 }}件商品</text>
					</view>
					<view class="" v-if="orderDetails.zt != 1">
						￥{{ orderDetails.totalPrice || 0 }}
					</view>
				</view>
				<view class="box-one">
					<text v-if="orderDetails.totalPrice < 1000 && orderDetails.zt != 1">配送方式</text>
					<view class="" v-if="orderDetails.totalPrice < 1000 && orderDetails.zt != 1">
						快递<text>￥{{ freight[1].dictValue }}</text>
					</view>
					<view v-if="orderDetails.totalPrice > 1000 && orderDetails.zt != 1">
						免运费
					</view>
				</view>

				<view class="box-one one-bor box-end">

					<view class="">
						合计：<text class="all">￥{{ orderDetails.totalPrice || 0 }}</text>
					</view>
				</view>
			</view>

			<view class="box" v-if="statusValue != 104 && statusValue != 103">
				<view class="box-one">
					<view class="one-colors">
						订单编号：{{ orderDetails.memberId }}
						<text class="copy" @click="copyText">复制</text>
					</view>
				</view>
				<view class="box-one">

					<view class="one-colors">
						创建时间：{{ orderDetails.createTime }}
					</view>
				</view>
				<view class="box-one" v-if="statusValue == 101">

					<view class="one-colors">
						支付时间：{{ orderDetails.payTime }}
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 全选区域 -->

		<view class="btn" :class="{ 'btn-height': statusValue == 104 }" v-if="statusValue != 100">
			<view class="connection-box" v-if="statusValue == 104">
				<button class="swipers-btn" open-type="contact"></button>
				<view class="connection">
					联系客服
				</view>
			</view>
			<view class="btn-box" v-else>
				<!-- <view class="left-kefu">
					<button class="swipers-btn" open-type="contact">4565</button>
					<image src="../../static/home/two.png" mode=""></image>
					<text>客服</text>
				</view> -->
				<view class="btn-right">
					<view class="butt but-box butts" v-if="statusValue != 101 && statusValue != 105">
						<button class="swipers-btn" open-type="contact">4565</button>
						<text>联系客服</text>
					</view>
					<view class="butt butts" @click="refund" v-if="statusValue == 101">
						申请退款
					</view>

					<!-- <view class="butt butts" @click="deliver" v-if="statusValue==101">
						查看物流
					</view> -->
					<view class="butt" @click="receiptGoods" v-if="statusValue==107">
						确认收货
					</view>
					<!-- 
					<view class="butt butts" @click="Cancel" v-if="statusValue!=107">
						修改地址
					</view> -->
					<view class="butt" @click="Withdrawal" v-if="statusValue == 103">
						撤销申请
					</view>
					<view class="butt" @click="doitAgain"
						v-if="statusValue != 100 && statusValue != 103 && statusValue!=107">
						再来一单
					</view>
					<view class="butt" @click="evaluate" v-if="statusValue == 105">
						评价
					</view>
				</view>


			</view>

		</view>

		<!-- 结算区域 -->
		<view class="bot-tom" v-else>
			<view class="bot-btn">
				<view class="checkout">
					<view class="">
						<view class="yunfei">
							<!-- <text class="yun">{{orderDetails.totalPrice<1000?'含运费':'免运费'}}</text> -->
							<text class="total">待付款</text>
							<view class="box-text">
								￥
								<text>{{ orderDetails.totalPrice || 0 }}</text>
							</view>
						</view>
					</view>
					<view class="delete-btn" @click="checkout">去支付</view>
				</view>

			</view>
		</view>



	</view>
</template>
<!-- ----------------------------------------------- -->
<!-- 写在此处，104代表商城订单为已退款，所有的订单状态请查看页面上的请求接口 list?dictType=commodity_status 查看订单状态 -->
<!-- ----------------------------------------------- -->
<script>
	import {
		toast,
		getStore
	} from "../../utils";
	import {
		applyGoods,
		goodsConfirm,
		removeGoodsOrder,
		address,

		getregistration,
		goodsOrderDetails,
		getDelivery,
		setGoodspay

	} from '../../service/api.js';
	import delVue from '../../components/del.vue';
	import config from "../../utils/config";
	export default {
		components: {
			delVue
		},
		data() {
			return {
				isdel: false,
				one: "再想想",
				two: "确定",
				threeText: "是否确认收货",
				four: "提示",
				freight: [],
				show: false,
				isRefund: 0,
				title: "确认订单",
				carImg: config.ossHost + "2025/01/13/f4a179c384714ccbbbb74c8a18134e41.png",
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				togglebg: config.ossHost + '2025/01/03/b7e97ec044a3427180a2b3d13ffb10b2.png',
				list: [{
						status: 104,
						name: "已退款",
						text: "费用已原路返回，请关注查询",
						url: config.topHost + '2024/12/28/63f79801246a404b80e39cccdc784025.png',
					},
					{
						status: 103,
						name: "退款申请待商家处理",
						text: "您已发起退款申请，商家将尽快为您处理",
						url: config.topHost + '2024/12/28/f528f265984a4c10848f1f6f66e60fd0.png',
					},

				],
				caseList: {
					seleAddress: "请先选择地址和配送方式，再确认订单信息",
					name: ''
				},
				orderDetails: {},
				// 模拟的购物车数据
				cartData: [],
				orderData: {},
				statusValue: 0,
				order: false,
				isAllSelected: false, // 是否全选
				isEditMode: false,
				refundParams: {
					id: "",
					refundCause: ""
				},
				shopId: '',
				refundData: [{
						title: "我不想要了",
						selected: false,
					},
					{
						title: "收货地址信息填写错误",
						selected: false,
					},
					{
						title: "商品缺货",
						selected: false,
					},
					{
						title: "其他",
						selected: false,
					}
				],
				delList: [],

				status: [],
				refundText: "",
			};
		},
		onLoad(options) {

			if (options.order) {
				this.order = true
			}

			if (options.id) {
				this.shopId = options.id
				this.getStatus(options.id);

			}
			this.delivery();
			this.getcarriage()


		},
		computed: {
		  companyName() {
		    // 确保 delList 和 orderDetails 存在且 orderDetails 中有物流公司 ID
		    if (Array.isArray(this.delList) && this.orderDetails && this.orderDetails.logisticsCompanyId) {
		      const delivery = this.delList.find(item => item.dvyId === this.orderDetails.logisticsCompanyId);
			  console.log(delivery,"这里是否有值")
		      return delivery ? delivery.dvyName : null;  // 返回 companyName 或 null
		    }
		    return null;  // 如果没有找到匹配项或数据还未加载，返回 null
		  }
		},
		methods: {
			//获取快递公司
			async delivery() {
				let res = await getDelivery();
				if (res.code == 200) {
					this.delList = res.data

				}
			},
			//获取运费价格
			async getcarriage() {
				let res = await getregistration("carriage");
				if (res.code == 200) {
					this.freight = res.rows;

				}
			},

			//确认收获
			receiptGoods() {
				debugger;
				this.isdel = true;

			},
			gomodal(item) {
				this.isdel = item;
			},
			//这里执行退号操作
			async gostay(item) {
				let res = await goodsConfirm({
					id: this.shopId
				})
				if (res.code == 200) {
					toast("收货成功");
					this.isdel = item;
					this.getOrderList(this.shopId);
				}


			},

			// 撤销退款
			Withdrawal() {

				this.removeOrder()
			},

			//撤销退款
			async removeOrder() {

				let res = await removeGoodsOrder({
					id: this.shopId
				});
				if (res.code == 200) {
					toast("已撤销");
					this.show = false;
					this.getOrderList(this.shopId);
				} else {
					toast("申请失败");
					this.show = false;
				}
			},
			//单个评价
			IndividualEvaluation(item) {
				item.orderNumber = this.orderDetails.orderNumber;
				item.goodsOrderDetails = [];
				item.goodsOrderDetails.push(item.goods);
				uni.navigateTo({
					url: `/integration/evaluate/index?orderDetails=${JSON.stringify(item)}`
				})
			},
			//评价
			evaluate() {
				uni.navigateTo({
					url: `/integration/evaluate/index?orderDetails=${JSON.stringify(this.orderDetails)}`
				})
			},


			//获取商城订单状态
			async getStatus(id) {
				let res = await getregistration("commodity_status");
				if (res.code == 200) {
					this.status = res.rows;
					this.getOrderList(id);
					// consoloe.log(this.status, )
				}
			},
			//再来一单
			doitAgain(item) {
				
				uni.navigateTo({
					url: `/integration/productList/index?id=${this.orderDetails.goodsOrderDetails[0].goodsId}`//传递的参数是商品id
				})
			},
			//支付
			async paySign(index, item) {
				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}
				try {
					let params = {
						payType: index, //支付类型1:支付宝 2:微信
						orderNo: this.orderDetails.orderNumber,
					};
					let res = await setGoodspay(params);
					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}
					let data = res.data;
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								toast("支付成功，耐心等候");
								uni.navigateTo({
									url: '/integration/paymentSuccess/index'
								})
							}
						},
						fail: (err) => {
							toast("支付失败");
							setTimeout(() => {
								// uni.navigateTo({
								// 	url: `/My/register?index=${this.orderStatus.unpaid}&backType=payment`,
								// });
							}, 1500);
						},
					});
				} catch (error) {

				}
			},

			//获取商城列表
			async getOrderList(id) {
				let res = await goodsOrderDetails(id);
				if (res.code == 200) {

					this.orderDetails = res.data;
					this.statusValue = res.data.status;
					//退款申请id
					this.refundParams.id = res.data.id;
					this.caseList = res.data.address;
					this.cartData = res.data.goodsOrderDetails;
					this.title = this.regListStatus(this.statusValue);
					this.caseList.seleAddress = res.data.address.shippingAddress + res.data.address.address;

					// this.register = res.rows;

				}
			},
			regListStatus(item) {

				// 假设status是一个包含字典项的数组，查找与item匹配的status项
				let statusItem = this.status.find(s => s.dictValue == item); // 查找与item匹配的状态
				return statusItem ? statusItem.dictLabel : '未知状态'; // 返回状态标签，如果没有匹配项则返回'未知状态'
			},

			//发货详情
			deliver() {
				// uni.navigateTo({
				// 	url: `/My/deliver/index?orderData=${this.orderData}`
				// })
			},
			//确认退款
			confirmRefund() {
				this.refundParams.refundCause = this.refundData[this.isRefund].title;
				this.refundOrder()
			},

			//退款
			async refundOrder() {
				let res = await applyGoods(this.refundParams);
				if (res.code == 200) {
					toast("已申请");
					this.show = false;
					this.getOrderList(this.shopId);
				} else {
					toast("申请失败");
					this.show = false;
				}
			},



			//我再想想
			thinkAgain() {
				this.show = false;
			},
			toggleItemSelection(item, index) {
				this.isRefund = index;
			},
			refund(item) {
				this.show = true;
			},
			goAdd() {
				uni.navigateTo({
					url: '/My/address/index'
				})
			},

			copyText() {
				// 使用 uni.setClipboardData 将文本复制到剪贴板
				uni.setClipboardData({
					data: this.orderDetails.orderNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
						console.log(err);
					}
				});
			},



			checkout() {
				this.paySign();


			},
			updateSelectAllStatus() {
				// 更新全选状态
				this.isAllSelected = this.cartData.every(item => item.selected);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 0 24rpx;
		font-size: 24rpx;
		background: #FFFFFF;
		padding: 24rpx;
		border-radius: 8rpx;
		margin-bottom: 24rpx;

		.box-one {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;



			text {

				color: #808080;
			}

			view {
				// font-weight: bold;
			}

			.copy {
				display: inline-block;
				width: 52rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #E6E6E6;
			}

			.all {
				font-weight: bold;
				font-size: 28rpx;
				color: #FF7C54;
			}
		}

		.one-bor {
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}



		.box-one:last-child {
			margin-bottom: 0;
		}

		.box-end {
			justify-content: flex-end;
		}
	}

	.pop-tit {
		text-align: center;
		padding: 40rpx 0;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;

	}

	.top {
		display: flex;

		align-items: center;
		font-weight: bold;
		font-size: 28rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			margin-right: 10rpx;
		}

		.top-box {
			display: flex;
			align-items: center;
			margin-left: 48rpx;
			margin-bottom: 24rpx;

			.text-co {
				margin-top: 15rpx;
				color: #808080;
				font-size: 24rpx;
			}


		}
	}

	.refund-btn {
		width: 702rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;

		.butt {
			width: 339rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background: #CCA566;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.butts {
			color: #CCA566;
			background: #fff;
			border: 2rpx solid #CCA566;
		}
	}

	.popup-box {
		.refundBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}

		.refundBox:last-child {
			border-bottom: none;
		}


	}


	.container-box {
		padding: 24rpx;
		background: #fff;
		margin: 0 24rpx 24rpx 24rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 8rpx;

		.addressno {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;

			image {
				width: 27rpx;
				height: 31rpx;
			}
		}

		.info-card {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info {
				font-weight: 100;
				color: #808080;

				text:last-child {
					margin-left: 10rpx;
				}
			}
		}
	}

	.title {
		background: #fff;
	}

	.scroll-Y {
		height: calc(100vh - 356rpx);
		padding-top: 24rpx;

		// width: 702rpx;
		// margin: auto;
		.deliver {
			display: flex;
			font-weight: bold;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.deliver-tit {
				margin-left: 10rpx;
				// width: 150rpx;
				color: #FF7C54;
			}

			.deliver-text {
				width: 374rpx;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的部分 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
			}
		}
	}


	.actions-main {
		height: 180rpx;
		width: 450rpx;
		display: flex;
		flex-direction: column;

		.main-item {
			display: flex;
			justify-content: space-between;
		}
	}

	.actions-box {
		display: flex;
		justify-content: space-between;



	}



	.cart-page {}

	.cart-box {
		margin: 0 24rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.cart-tit {
			padding: 24rpx 24rpx 0rpx 24rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		.cart-item {

			display: flex;
			align-items: center;
			padding: 24rpx;

		}

		.refund-box {
			display: flex;
			justify-content: flex-end;

			.refund {
				margin: 24rpx 24rpx 24rpx 0;
				padding: 12rpx 0;
				width: 144rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #1A1A1A;
				border: 1rpx solid #E6E6E6;
			}
		}
	}





	.item-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.item-details {
		flex: 1;
	}



	button {
		margin: 5px;
	}

	.select-all {
		display: flex;
		align-items: center;

	}

	.delete-btn {
		width: 168rpx;
		height: 70rpx;
		background: #CCA566;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 16rpx;
		color: #FFFFFF;
	}

	.checkout {
		display: flex;
		align-items: center;
		// background-color: #f1f1f1;

	}

	.checkout button {
		width: 100%;
		padding: 10px;
		background-color: #ff6600;
		color: white;
		border: none;
	}

	.bot-btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;



		.yunfei {
			display: flex;
			font-size: 24rpx;
			color: #1A1A1A;
			align-items: baseline;

			.yun {
				color: #808080;
			}

			.total {}

		}
	}

	.box-text {

		color: #FF7C54;

		text {
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.all-text {

		color: #808080;

		text {
			font-weight: 100;
		}
	}

	.bot-tom {
		position: fixed;
		padding: 24rpx;
		background: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		width: 702rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		z-index: 100;
		left: 0;
		right: 0;

		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(206, 190, 165, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.btn-box {
			width: 702rpx;
			height: 80rpx;
			margin: auto;
			margin-top: 15rpx;
			display: flex;
			justify-content: space-between;

			.btn-right {
				width: 702rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 5rpx;
			}

			.left-kefu {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				width: 48rpx;
				height: 80rpx;

				button {
					width: 48rpx;
					height: 60rpx;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}

				text {
					font-size: 24rpx;
				}
			}

			.butt {
				width: 340rpx;
				height: 80rpx;
				border-radius: 8rpx;
				background: #CCA566;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}

			.butts {
				color: #CCA566;
				background: #fff;
				border: 2rpx solid #CCA566;
			}
		}

		.connection-box {
			width: 702rpx;
			height: 80rpx;
			margin-top: 15rpx;
			margin: auto;
			position: relative;

			.connection {
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				width: 702rpx;
				height: 80rpx;
				background: #CCA566;
				border-radius: 8rpx 8rpx 8rpx 8rpx;


			}

			.swipers-btn {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				opacity: 0;
				width: 702rpx;
				height: 80rpx;
			}
		}

	}

	.checkbox {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		margin-right: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		cursor: pointer;
		background-color: white;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.checkbox.selected {
		border: 1rpx solid #CCA566;
		background-color: #CCA566;
	}

	.item-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.but-box {
		position: relative;

		.swipers-btn {
			position: absolute;
			top: -6px;
			left: -6px;
			opacity: 0;
			width: 296rpx;
			height: 87rpx;
		}
	}

	.one-color {
		color: #FF7C54 !important;
	}

	.one-colors {
		color: #808080;
	}

	.box-borde {
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 24rpx;

	}

	.btn-height {
		height: 144rpx;
		padding-top: 24rpx;
	}
</style>